
import { Button, Form, Input, InputNumber } from 'antd';
import { useModel } from '@umijs/max'
import { addMoneyCardTemplateTemplate } from './services'
import { useRequest } from 'ahooks'
import UseRange from '../couponList/components/UseRange';

const MoneyCardTemplateEditPage: React.FC = () => {
  const [editForm] = Form.useForm()
  const { runAsync, loading } = useRequest(addMoneyCardTemplateTemplate, {manual: true})
  const { closeCurrentTab } = useModel('global')

  const onFinish = (formValues: any) => {
    runAsync({
      title: formValues.title,
      fullMoney: formValues.fullMoney,
      expireDay: formValues.expireDay,
      stationIds: formValues.stationIds?.map((it: any) => it.id),
      commend: formValues.commend,
    })
    .then(() => {
      const event = new CustomEvent('refreshMoneyCardTemplateList')
      window.dispatchEvent(event)
      closeCurrentTab('/coupon/cardList')
    })
  }
  
  return (
    <div className='container'>
      <div className="card">
        <Form form={editForm} name='editForm' labelCol={{flex: '120px'}} onFinish={onFinish}>
          <Form.Item name='title' label='卡名称' rules={[{required: true, message: '请输入卡名称'}]}>
            <Input placeholder='请输入' style={{width: 320}} />
          </Form.Item>
          <Form.Item label='有效天数' required>
            <Form.Item name='expireDay' noStyle rules={[{required: true, message: `请输入有效天数`}]}>
              <InputNumber placeholder='请输入' style={{width: 320}} precision={0} min={0} />
            </Form.Item>
            <div>填 0 代表永久有效</div>
          </Form.Item>
          <Form.Item name='fullMoney' label='卡面额' rules={[{required: true, message: `请输入卡面额`}]}>
            <InputNumber placeholder='请输入' style={{width: 320}} precision={0} min={0} />
          </Form.Item>
          <Form.Item name='stationIds' label='使用范围'>
            <UseRange style={{width: 500}} />
          </Form.Item>
          <Form.Item name='commend' label='描述'>
            <Input.TextArea style={{width: 320, height: 80}} />
          </Form.Item>
          <Form.Item label=' ' colon={false}>
            <Button type='primary' htmlType='submit' loading={loading}>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default MoneyCardTemplateEditPage;
